# Image properties

> Due to pixel limitation, only 1 image to draws at player's screen. You can clear or replace the current drawed image with the new one.

> Total pixels for an image to draw is 1024 pixels, which is means standard image size is 32 x 32 or any combinations as long as its not exceeds the limit.

> The image drawing mechanism is using UI.Box elements. If you use all the UI.Box elements (1024 pixels), you will not be able to creates UI.Box elements anymore. Best practices is creates your UI.Box elements first. After that's done, now you can safely use the image processing library to draws an image.

> For now, supported pixels data format are ImageMagick only.


# How to convert image into pixels data

Please makes sure your image pixel counts is no more than 1024 pixels. Otherwise, resizes your image first.

## With ImageMagick

1. Open this website on your browser, https://imagemagick.online,
2. Upload the image on that site,
3. Sets the output file extension with `.h` file extension, ie. `my_image.h`,
4. Checks the final command before executing,
5. Clicks `Execute` button, and
6. After to process is finished, clicks the `Click here to download` button.

||
|---|
|![](./img_imagemagick.png)|
|Pict. 1.1 : ImageMagick online website.|


# How to insert pixels data into Lua

## With ImageMagick

1. Creates a `.lua` script file on your project directory,
2. Creates a table variable,
3. Open your generated `.h` file,
4. Fills the table variable with array of pixels included on that `.h` file,
5. Save the script, and
6. Insert your script file name into `project.json` file.

||||
|---|---|---|
|![](./img_emptylua.png)|![](./img_filledlua.png)|![](./img_projectjson.png)|
|Pict. 2.1 : An empty table variable.|Pict. 2.2 : Filled table variable with generated pixels data.|Pict. 2.3 : Final `project.json` setting.|



# How to draws an image with pixels data

Here is the sample code to draws an image.

```lua
-- Image location on screen.
local position = { x = 0 , y = 0 };

-- Image size.
local size = { width = 32, height = 28 };

Image.UI:Create( position , size ); -- Initializes the image creation.
Image.UI:Set( img_hl3_logo ); -- This is where the pixels data are used for.
Image.UI:Show(); -- Shows the image.
```
